<script>
import { mapState } from 'vuex'
import DishesForm from '@/views/category/components/dishesForm.vue'
import MealForm from '@/views/category/components/mealForm.vue'

export default {
  name: 'category',
  components: { MealForm, DishesForm },
  data() {
    return {
      pageParams: {
        name: undefined,
        type: null,
        page: 1,
        pageSize: 10
      },
      dishesVisible: false,
      visible: false,
      addMode: '',
      dishesFormRef: null,
      mealFormRef: null
    }
  },
  methods: {
    /* 获取所有分类的回调函数 */
    async fetchCategoryList() {
      try {
        this.$store.dispatch('categoryStore/fetchCategoryListAction', this.pageParams)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /*
    * 分页参数
    *  */
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
      this.fetchEmployeeList()
    },
    handleCurrentChange(page) {
      this.pageParams.page = page
      this.fetchCategoryList()
    },
    /* 删除分类的回调函数 */
    async handleDelete(row) {
      const confirm = await this.$confirm(`确认删除${row.type === 1 ? '菜品分类' : '套餐分类'}吗?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).catch(error => error)
      if (confirm === 'cancel') return
      try {
        const message = await this.$store.dispatch('categoryStore/deleteCategoryAction', row.id)
        this.$message.success(message)
        this.fetchCategoryList()
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 更新分类状态的回调函数 */
    async updateStatus(status, id) {
      try {
        const newStatus = status === 1 ? 0 : 1
        const updateMessage = await this.$store.dispatch('categoryStore/updateCategoryStatusAction', { status: newStatus, id })
        this.fetchCategoryList()
        this.$message.success(updateMessage)
      } catch (error) {
        this.$message.error(error.message)
      }
    },
    /* 查询分类的回调函数 */
    handleSearch() {
      this.pageParams.page = 1
      this.fetchCategoryList()
    },
    /* 点击新增菜品分类的回调函数 */
    handleAddDishe() {
      this.visible = true
      this.addMode = 'dishe'
    },
    /* 点击新增套餐分类的回调函数 */
    handleAddMeal() {
      this.visible = true
      this.addMode = 'meal'
    },
    handleEdit(row) {
      this.visible = true
      this.addMode = 'updateCategory'
      this.$nextTick(() => {
        this.$refs.dishesFormRef.fetchCategoryDetail(row)
      })
    },
    async handleSubmit() {
      if (this.addMode === 'dishe') {
        const validate = await this.$refs.dishesFormRef.$refs.formRef.validate().catch(error => error)
        if (!validate) return
        try {
          const message = await this.$store.dispatch('categoryStore/addCategoryAction', this.$refs.dishesFormRef.formData)
          this.visible = false
          this.fetchCategoryList()
          this.$message.success(message)
        } catch (error) {
          this.$message.error(error.message)
        }
      } else if (this.addMode === 'meal') {
        const validate = await this.$refs.mealFormRef.$refs.formRef.validate().catch(error => error)
        if (!validate) return
        try {
          const message = await this.$store.dispatch('categoryStore/addCategoryAction', this.$refs.mealFormRef.formData)
          this.visible = false
          this.fetchCategoryList()
          this.$message.success(message)
        } catch (error) {
          this.$message.error(error.message)
        }
      } else {
        const validate = await this.$refs.dishesFormRef.$refs.formRef.validate().catch(error => error)
        if (!validate) return
        try {
          const message = await this.$store.dispatch('categoryStore/updateCategoryAction', this.$refs.dishesFormRef.formData)
          this.visible = false
          this.fetchCategoryList()
          this.$message.success(message)
        } catch (error) {
          this.$message.error(error.message)
        }
      }
    },
    close() {
      if (this.addMode === 'dishe' || this.addMode == 'updateCategory') {
        this.$refs.dishesFormRef.$refs.formRef.resetFields()
      } else {
        this.$refs.mealFormRef.$refs.formRef.resetFields()
      }
    }

  },
  computed: {
    title() {
      if (this.addMode === 'dishe') {
        return '新增菜品分类'
      } else if (this.addMode === 'meal') {
        return '新增套餐分类'
      } else {
        return '修改分类'
      }
    },
    ...mapState('categoryStore', ['total', 'records'])
  },
  mounted() {
    this.fetchCategoryList()
  }
}
</script>

<template>
  <div class="category-container">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="19">
            <el-form size="small" inline>
              <el-form-item label="分类名称:">
                <el-input placeholder="请输入分类名称" v-model="pageParams.name"></el-input>
              </el-form-item>
              <el-form-item label="分类类型:">
                <el-select placeholder="请选择分类类型" v-model.number="pageParams.type">
                  <el-option :value="undefined" label="所有分类"></el-option>
                  <el-option :value="1" label="菜品分类"></el-option>
                  <el-option :value="2" label="套餐分类"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="small" icon="el-icon-search" type="info" @click="handleSearch">查询分类</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="5">
            <el-button size="small" icon="el-icon-plus" type="primary" @click="handleAddDishe">新增菜品分类</el-button>
            <el-button size="small" icon="el-icon-plus" type="primary" @click="handleAddMeal">新增套餐分类</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table size="small" stripe border :data="records">
        <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
        <el-table-column prop="id" label="分类ID" align="center"></el-table-column>
        <el-table-column prop="name" label="分类名称" align="center"></el-table-column>
        <el-table-column label="分类类型" align="center">
          <template #default="{row}">
            {{ row.type === 1 ? '菜品分类' : '套餐分类' }}
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="{row}">
            <el-switch v-model="row.status" disabled :active-value="1" :inactive-value="0" active-text="启用" inactive-text="禁用" active-color="#13ce66"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="操作时间" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{row}">
            <el-button type="text" @click="handleEdit(row)">修改</el-button>
            <el-button type="text" @click="updateStatus(row.status,row.id)">{{ row.status === 1 ? '禁用' : '启用' }}</el-button>
            <el-button type="text" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageParams.page" :page-sizes="[10, 20, 30, 40]" :page-size="pageParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background></el-pagination>
    </el-card>

    <el-dialog :title="title" :visible.sync="visible" @close="close">
      <dishes-form v-if="addMode==='dishe'||addMode=='updateCategory'" ref="dishesFormRef"></dishes-form>
      <meal-form v-if="addMode==='meal'" ref="mealFormRef"></meal-form>
      <template #footer>
        <el-button size="small" @click="visible=false">取消</el-button>
        <el-button size="small" type="primary" @click="handleSubmit">保存</el-button>
      </template>

    </el-dialog>


  </div>
</template>

<style scoped lang="scss">
.category-container {
  padding: 25px;

  .el-table {
    margin-bottom: 10px;
  }

  .el-pagination {
    display: flex;
    justify-content: center;
  }
}
</style>
